
    import {
      AssetType,
      BackgroundMode,
      BlinnPhongMaterial,
      Camera,
      Color,
      DirectLight,
      Engine,
      GLTFResource,
      Layer,
      MeshRenderer,
      PrimitiveMesh,
      Scene,
      SceneManager,
      Script,
      SkyBoxMaterial,
      TextureCube,
      Vector3,
      WebGLEngine,
    DHTML} from "@galacean/engine";
const {window,document,Blob,fetch,URL,Event,Event0} = DHTML
    //import { OrbitControl } from "@galacean/engine-toolkit-controls";
    import * as dat from "dat.gui";

Page({
  onLoad() {
    
    WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
      engine.canvas.resizeByClientSize();
    
      const firstScene = initFirstScene(engine);
      const secondScene = initSecondScene(engine);
      engine.run();
      addGUI(engine.sceneManager, firstScene, secondScene);
    });
    
    function initFirstScene(engine) {
      const scene = engine.sceneManager.scenes[0];
      const rootEntity = scene.createRootEntity();
    
      // Add sky box background
      engine.resourceManager
        .load({
          urls: [
            "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*5w6_Rr6ML6IAAAAAAAAAAAAAARQnAQ",
            "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*TiT2TbN5cG4AAAAAAAAAAAAAARQnAQ",
            "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*8GF6Q4LZefUAAAAAAAAAAAAAARQnAQ",
            "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*D5pdRqUHC3IAAAAAAAAAAAAAARQnAQ",
            "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*_FooTIp6pNIAAAAAAAAAAAAAARQnAQ",
            "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*CYGZR7ogZfoAAAAAAAAAAAAAARQnAQ",
          ],
          type: AssetType.TextureCube,
        })
        .then((cubeMap1) => {
          const { background } = scene;
          background.mode = BackgroundMode.Sky;
          const skyMaterial = new SkyBoxMaterial(engine);
          skyMaterial.texture = cubeMap1;
    
          background.sky.material = skyMaterial;
          background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
        });
    
      // Create full screen camera
      const cameraEntity = rootEntity.createChild("fullscreen-camera");
      const camera = cameraEntity.addComponent(Camera);
      camera.cullingMask = Layer.Layer0;
      cameraEntity.transform.setPosition(10, 10, 10);
      cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
     // cameraEntity.addComponent(OrbitControl);
    
      const lightEntity = rootEntity.createChild("Light");
      lightEntity.transform.setRotation(-30, 0, 0);
      lightEntity.addComponent(DirectLight);
    
      // Create sphere
      const entity = rootEntity.createChild("sphere");
      entity.transform.setPosition(-3, 0, 3);
      const renderer = entity.addComponent(MeshRenderer);
      renderer.mesh = PrimitiveMesh.createSphere(engine, 2, 24);
      const material = new BlinnPhongMaterial(engine);
      material.baseColor = new Color(1, 0.25, 0.25, 1);
      renderer.setMaterial(material);
      return scene;
    }
    
    function initSecondScene(engine) {
      // Init window camera
      const scene = new Scene(engine);
      engine.sceneManager.addScene(scene);
      const rootEntity = scene.createRootEntity();
    
      const lightEntity = rootEntity.createChild("Light");
      lightEntity.transform.setRotation(-45, 0, 0);
      lightEntity.addComponent(DirectLight);
    
      const cameraEntity = rootEntity.createChild("window-camera");
      const camera = cameraEntity.addComponent(Camera);
      camera.viewport.set(0.6, 0.2, 0.25, 0.6);
      camera.farClipPlane = 200;
      cameraEntity.transform.setPosition(0, 3, 5);
      cameraEntity.transform.lookAt(new Vector3(0, 1, 0));
    
      engine.resourceManager
        .load(
          "https://gw.alipayobjects.com/os/OasisHub/267000040/9994/%25E5%25BD%2592%25E6%25A1%25A3.gltf"
        )
        .then((gltf) => {
          const defaultSceneRoot = gltf.defaultSceneRoot;
          rootEntity.addChild(defaultSceneRoot);
          defaultSceneRoot.addComponent(RotateScript);
        });
      return scene;
    }
    
    /**
     * Script for rotate.
     */
    class RotateScript extends Script {
      /**
       * @override
       * The main loop, called frame by frame.
       * @param deltaTime - The deltaTime when the script update.
       */
      onUpdate(deltaTime) {
        this.entity.transform.rotate(0.0, 50 * deltaTime, 0);
      }
    }
    
    function addGUI(
      sceneManager,
      firstScene,
      secondScene
    ) {
      const guiData = {
        showFirst: true,
        showSecond: true,
      };
    
      const gui = new dat.GUI();
      const sceneFolder = gui.addFolder("multi scene");
      sceneFolder.open();
    
      gui
        .add(guiData, "showFirst")
        .onChange((value) => {
          if (value) {
            sceneManager.addScene(0, firstScene);
          } else {
            sceneManager.removeScene(firstScene);
          }
        })
        .listen();
      gui
        .add(guiData, "showSecond")
        .onChange((value) => {
          if (value) {
            sceneManager.addScene(1, secondScene);
          } else {
            sceneManager.removeScene(secondScene);
          }
        })
        .listen();
    }
  }
})